<template>
	<div class="system-role-container">
		<el-card shadow="hover">
			<div class="system-user-search mb15">
				<el-form :inline="true">
					<el-form-item label="版本">
						<el-input type="number" v-model.number="state.searchData.versionCode" placeholder="版本号" clearable />
					</el-form-item>
					<el-form-item>
						<el-button size="default" type="primary" @click="feachData">
							<el-icon>
								<ele-Search />
							</el-icon>
							查询
						</el-button>
					</el-form-item>
					<el-form-item class="topRightBtn">
						<el-button size="default" type="success" @click="onOpenAddApp">
							<el-icon>
								<ele-FolderAdd />
							</el-icon>
							新增
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table :data="state.tableData.list" style="width: 100%" border>
				<el-table-column type="index" label="#" width="60" />
				<el-table-column prop="appName" label="APP名称" width="100" show-overflow-tooltip></el-table-column>
				<!-- <el-table-column prop="packageName" label="APP包名" width="190" show-overflow-tooltip></el-table-column> -->
				<el-table-column prop="versionName" label="版本名" width="80" show-overflow-tooltip></el-table-column>
				<el-table-column prop="versionCode" label="版本号" width="80" show-overflow-tooltip></el-table-column>
				<el-table-column label="状态" width="100" show-overflow-tooltip>
					<template #default="scope">
						<el-tag v-if="scope.row.isEnable == 1" type="success">启用</el-tag>
						<el-tag v-else type="error">禁用</el-tag>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="platform" label="平台" width="100" show-overflow-tooltip></el-table-column> -->
				<el-table-column prop="updateLog" label="更新日志" show-overflow-tooltip></el-table-column>
				<el-table-column prop="downloadUrl" label="下载地址" show-overflow-tooltip></el-table-column>
				<!-- <el-table-column prop="createdAt" label="上传日期" show-overflow-tooltip></el-table-column> -->
				<el-table-column label="操作" width="180">
					<template #default="scope">
						<el-button size="small" text type="primary" @click="onOpenEditApp(scope.row)"
							><el-icon><ele-EditPen /></el-icon>修改</el-button
						>

						<el-popconfirm title="确定要删除该版本?" @confirm="deleteVersion(scope.row)" :width="200">
							<template #reference>
								<el-button size="small" text type="primary"
									><el-icon><ele-DeleteFilled /></el-icon>删除</el-button
								>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<pagination
				v-show="state.tableData.total > 0"
				:total="state.tableData.total"
				v-model:page="state.searchData.pageNum"
				v-model:limit="state.searchData.pageSize"
				@pagination="feachData"
			/>
		</el-card>

		<appEdit ref="editAppRef" @success="feachData" :editType="state.editType" />
	</div>
</template>

<script lang="ts" setup name="App">
import { page, del } from '/@/api/hm/app';

import { toRefs, reactive, computed, onMounted, ref } from 'vue';
import appEdit from './component/appEdit.vue';
import { ElMessage } from 'element-plus';

const editAppRef = ref();

const state = reactive({
	editType: '',
	searchData: {
		versionCode: '',
		pageNum: 1,
		pageSize: 20,
	},

	tableData: {
		list: [],
		total: 0,
	},
});

onMounted(() => {
	feachData();
});

// 打开新增菜单弹窗
const onOpenAddApp = () => {
	state.editType = 'add';
	editAppRef.value.openDialog();
};

// 打开编辑菜单弹窗
const onOpenEditApp = (row: any) => {
	state.editType = 'edit';
	let rowData = JSON.parse(JSON.stringify(row));
	editAppRef.value.openDialog(rowData);
};

function feachData() {
	page(state.searchData).then((res) => {
		state.tableData = res.data;
	});
}

function deleteVersion(row: any) {
	del({ id: row.id }).then((res: any) => {
		if (res.code == 0) {
			feachData();
			ElMessage.success('删除成功');
		}
	});
}
</script>

<style scoped lang="scss"></style>
